<template>
  <view class="index g_content">
    <view @click="handleSubscribe" class="custom c_f" :style="'top:' + customTop + 'px'">
      <text>Agn电竞俱乐部</text>
    </view>
    <view class="main">
      <view class="header" :style="'padding-top:' + titleHeight + 'px'">
        <view @click="search" class="search-box">
          <text>输入关键词搜索商品</text>
          <text class="search-icon">搜索</text>
        </view>
      </view>
      <view class="order-notice">
        <u-notice-bar :text="orderNotice" bgColor="#000" color="#fff" fontSize="12" direction="column" duration="2500"></u-notice-bar>
      </view>
      <!-- banner图 -->
      <view>
        <u-swiper :list="banner" indicator :height="bannerHeight" indicatorActiveColor="#FA191E" indicatorInactiveColor="#dddddd"></u-swiper>
      </view>
      <!-- <view class="notice"> -->
      <u-notice-bar :text="notice" bgColor="#513F2D" color="#fff" style="white-space:pre;"></u-notice-bar>
      <!-- </view> -->

      <u-grid :border="false" col="5">
        <u-grid-item @click="handleToInfo('/pages/sign/index')">
          <u-icon :customStyle="{paddingTop:10+'rpx'}" name="/static/img/qd.png" :size="40"></u-icon>
          <text class="grid-text c_f">每日签到</text>
        </u-grid-item>
        <u-grid-item @click="handleToInfo('/pages/prizeDraw/index')">
          <u-icon :customStyle="{paddingTop:10+'rpx'}" name="/static/img/dzp.png" :size="40"></u-icon>
          <text class="grid-text c_f">大转盘</text>
        </u-grid-item>
        <u-grid-item @click="handleToInfo('/pages/redeem/index')">
          <u-icon :customStyle="{paddingTop:10+'rpx'}" name="/static/img/jfsc.png" :size="40"></u-icon>
          <text class="grid-text c_f">积分商城</text>
        </u-grid-item>
        <!--            <u-grid-item @click="handleToInfo('/pages/scratchCard/index')">
                         <u-icon :customStyle="{paddingTop:10+'rpx'}" name="/static/img/ggl.png" :size="40"></u-icon>
                        <text class="grid-text c_f">刮刮乐</text>
                    </u-grid-item>-->
        <u-grid-item @click="handleToInfo('/pages/rankingList/index')">
          <u-icon :customStyle="{paddingTop:10+'rpx'}" name="/static/img/phb.png" :size="40"></u-icon>
          <text class="grid-text c_f">排行榜</text>
        </u-grid-item>
        <u-grid-item @click="goKf">
          <u-icon :customStyle="{paddingTop:10+'rpx'}" name="/static/img/kf.png" :size="40"></u-icon>
          <text class="grid-text c_f">在线客服</text>
        </u-grid-item>
        <!--                <u-grid-item>
                    <button open-type="contact">
                        <view class="dis_f_co_c_c">
                            <u-icon :customStyle="{paddingTop:10+'rpx'}" name="/static/img/kf.png" :size="40"></u-icon>
                            <view class="grid-text c_f"> 在线客服</view>
                        </view>
                    </button>
                </u-grid-item> -->
      </u-grid>
      <!--      <image :src="pintuan" style="width: 100%;display:inline-block;margin: 20rpx 0" mode="widthFix" @click="goPinTuan" v-if="pintuan"></image>-->
      <!-- 商品列表 -->
      <view class="mt-2 view">
        <text class="c_yellow" style="font-size: 32rpx;font-weight: 900;">点单大厅</text>
      </view>
      <!--        <u-divider text="最新发布"  textColor="#FBAD02"></u-divider>-->
    </view>
    <view class="dis_f_l_c p_20">
      <u-grid :border="false" col="4">
        <u-grid-item v-for="(item,index) in typeList" :key="index" @click="handleTabChange(index)">
          <view class="dis_f_co_c_c">
            <image class="img_box" :src="item.url" :style="{borderColor:index==activeIndex?'#FBAD02':'#ccc'}"></image>
            <view class="f_s_12 m_t_5 m_b_5 over1" :style="{color:index==activeIndex?'#FBAD02':'#fff'}">{{item.configName}}</view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="p_10">
      <s-goods-list :goodsList="list" :showCart="true"></s-goods-list>
    </view>

    <view class="wrap">
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </view>
    <u-modal :show="showNotice" :title="notice.configName" :content='notice.configValue' @confirm="showNotice = false" @cancel="showNotice = false"></u-modal>
    <!-- 授权弹窗 -->
    <s-auth-modal />
  </view>
</template>

<script>
import { getGoodsListApi, getByKeyApi, getUnReadApi } from "@/sheep/api/index";
import { bindAgentId } from "@/sheep/utils/common";
import { subscribe } from "@/sheep/utils/wxUtil";
import { mapMutations } from "vuex";
import { myMixins } from "@/mixins/myMixins";
import { getOrderNoticeApi } from "@/sheep/api";
export default {
  mixins: [myMixins],
  data() {
    return {
      orderNotice: "",
      bannerHeight: 120,
      timer: null,
      titleHeight: 0,
      customTop: 0,
      scrollTop: 0,
      unSign: false,
      banner: [],
      typeList: [],
      activeIndex: 0,
      keyword: "",
      windowHeight: uni.getSystemInfoSync().windowHeight,
      showNotice: false,
      notice: "",
      pintuan: "",
    };
  },
  onLoad(options) {
    this.getHeight();
    this.getBannerList();
    this.getNotice();
    this.getTypeList();
    this.getBannerHeight();
    this.getPingtuan();

    if (options.scene) {
      //绑定邀请人id
      this.setBindAgentId(options.scene);
      bindAgentId();
    }
  },
  onReady() {},
  onShow(options) {
    // this.getSetTimeNumber();
    this.getOrderNotice();
  },
  onHide() {
    // 清除定时器
    // clearInterval(this.timer);
  },
  methods: {
    ...mapMutations({
      setBindAgentId: "user/setBindAgentId",
    }),
    handleTabChange(index) {
      this.activeIndex = index;
      this.updateData();
    },
    async getOrderNotice() {
      let res = await getOrderNoticeApi();
      this.orderNotice = res.data;
    },
    getList() {
      this.queryObj.oneType = this.typeList[this.activeIndex].configName;
      getGoodsListApi(this.queryObj).then((res) => {
        this.list = this.list.concat(res.rows);
        this.total = res.total;
        if (this.queryObj.pageNum * this.queryObj.pageSize < this.total) {
          this.status = "loadmore";
        } else {
          this.status = "nomore";
        }
        uni.stopPullDownRefresh();
      });
    },
    /** 循环请求消息接口 */
    async getMessage() {
      let res = await getUnReadApi();
      if (res.data) {
        uni.showTabBarRedDot({
          index: 3,
        });
        // 清除定时器
        clearInterval(this.timer);
      } else {
        // 清空红点
        uni.hideTabBarRedDot({
          index: 3,
        });
      }
    },
    /** 延时器时间 */
    async getSetTimeNumber() {
      let res = await getByKeyApi("chat");
      let setTimeNumber = res.data[0].configValue;
      //定时3秒刷新一次未读消息
      let that = this;
      this.timer = setInterval(() => {
        that.getMessage();
      }, setTimeNumber);
    },
    // 获取微信右上角胶囊高度
    getHeight() {
      let res = uni.getMenuButtonBoundingClientRect();
      this.titleHeight = res.top + res.height + 16;
      this.customTop = res.top + 3;
    },
    search() {
      uni.navigateTo({
        url: "/pages/index/search",
      });
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    handleToInfo(url) {
      uni.navigateTo({
        url,
      });
    },
    handleToTankingList(url) {
      uni.switchTab({
        url,
      });
    },
    handlerType(listIndex) {
      const app = getApp();
      app.globalData.curType = listIndex;
      uni.switchTab({
        url: "/pages/goods/index?type=" + listIndex,
      });
    },
    goInfo(data, index, tag) {
      uni.navigateTo({
        url: "/pages/info/index?goodsId=" + data.goodsId,
      });
    },
    async getPingtuan() {
      let res = await getByKeyApi("pintuan");
      this.pintuan = res.data[0]?.url;
    },

    async getBannerList() {
      let res = await getByKeyApi("banner");
      this.banner = res.data;
    },
    async getNotice() {
      let res = await getByKeyApi("notice");
      res.data.forEach((element) => {
        this.notice += element.configValue + "                     ";
      });
    },
    async getTypeList() {
      let res = await getByKeyApi("goods_type");
      this.typeList = res.data;
      this.updateData();
    },
    async getBannerHeight() {
      let res = await getByKeyApi("banner_h");
      this.bannerHeight = res.data[0]?.configValue;
    },
    //订阅管理员通知
    async handleSubscribe() {
      let res = await getByKeyApi("subscribe");
      if (res.data[0]?.configValue == 1) {
        subscribe(["LygIpCmFE69qN9q-CL4FJuHybp1ZepgFhQqSON1G_pc"]).then(
          (res) => {
            if (res.data) {
              uni.showToast({
                title: "订阅通知成功",
                icon: "none",
              });
            }
          }
        );
      }
    },
    goKf() {
      wx.openCustomerServiceChat({
        extInfo: { url: "https://work.weixin.qq.com/kfid/kfc94f7f122e00029ff" },
        corpId: "ww946e84db1faa17ae",
        success(res) {
          console.log(2222, res);
        },
        fail(res) {
          console.log(333, res);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
button::after {
  border: unset !important;
}
button {
  background-color: unset !important;
  line-height: unset !important;
  padding: unset !important;
}
.index {
  //背景渐变
  background: linear-gradient(to bottom, #6c563e 0%, #20170e 40%, #120c07 70%);
  //   position: relative;
  .order-notice {
    position: fixed;
    min-width: 62%;
    z-index: 99;
    top: 18%;
    //透明度
    opacity: 0.6;
    ::v-deep .u-notice__left-icon {
      display: none !important;
    }
    ::v-deep .u-notice-bar {
      padding: 6rpx 0 6rpx 16rpx !important;
      border-radius: 40rpx !important;
    }
  }
  .custom {
    position: absolute;
    left: 30rpx;
    font-size: 40rpx;
    font-weight: bolder;
  }
  .main {
    padding: 0 30rpx;
    .header {
      display: flex;
      padding: 42rpx 0;
      color: #fff;
      justify-content: space-between;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        //background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/indexbg.png")  no-repeat;
        //background-size: 100% auto;
        // background: #222020;
        z-index: -2;
      }
      .search-box {
        // background-color: #fff;
        border: #fff 1rpx solid;
        border-radius: 40rpx;
        width: 100%;
        height: 70rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5rpx 0 30rpx;
        color: #999;
        font-size: 26rpx;
        .search-icon {
          background-color: #fff;
          border-radius: 40rpx;
          color: #000;
          height: 60rpx;
          width: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .view {
      position: relative;
      text-align: center;
      &::before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 60rpx;
        height: 10rpx;
        background-color: #f443367a;
      }
    }
    .grid-text {
      font-size: 26rpx;
      padding: 10rpx 0 20rpx 0rpx;
      box-sizing: border-box;
    }
    .goods-box {
      background: #af5858;
      height: 25px;
      border-radius: 4px;
    }
  }
  //瀑布流
  .load-txt {
    padding: 0 0 20rpx 0;
    text-align: center;
    color: #999;
    font-size: 24rpx;
  }
  .load-icon {
    width: 300rpx;
    height: 300rpx;
    margin: 0 auto 20rpx auto;
    display: block;
  }
}
.notice {
  display: flex;
  margin-top: 20rpx;
  // ::v-deep .u-icon__icon {
  //   color: red !important;
  // }
}
.img_box {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 8rpx solid #ccc;
}
</style>
